<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Quartz任务管理</title>
    <link rel="Shortcut Icon" type="image/x-icon" href="https://leigq-blog.oss-cn-shenzhen.aliyuncs.com/gitee/quartz_lite_favicon.ico" />
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>

    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>

    <style>
        #top {
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>

</head>
<body>
<div id="task">
    <template>
        <div id="top">
            <el-button icon="el-icon-refresh" size="small" round type="success" plain  @click="refresh">刷新</el-button>
            <el-button icon="el-icon-circle-plus"size="small" round type="primary" plain @click="showAddTaskForm">添加</el-button>
            <el-button icon="el-icon-date" round  size="small" type="info" @click="windowOpen('http://cron.qqe2.com')">在线Cron表达式生成
            </el-button>

            <div style="position:absolute; left: 375px; top: 9px">
                <span style="font-size: 16px; color: #909399">自动刷新时间：</span>
                <el-select style="width: 100px" @change="autoRefreshTime" placeholder="自动刷新时间" size="small" v-model="value">
                    <el-option
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            v-for="item in cycleTime">
                    </el-option>
                </el-select>
            </div>

            <el-button v-if="this.embedded === false" size="small" @click="logout" style="position:absolute; right: 20px;" round type="danger" plain icon="el-icon-s-home">退出登录</el-button>

            <div style="display: flex; justify-content: center; margin-top: -38px">
                <img style="width: 130px;" src="https://leigq-blog.oss-cn-shenzhen.aliyuncs.com/gitee/logo.png">
            </div>

        </div>
    </template>
    <br>
    <template>
        <div style="margin-top: -17px; margin-left: 10px;">
            <el-table height="800" :data="sysTaskList" border ref="testTable" stripe>
                <el-table-column
                        label="任务ID"
                        align="center"
                        prop="taskId"
                        show-overflow-tooltip
                        sortable
                        width="90">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="任务名"
                        prop="taskName"
                        show-overflow-tooltip
                        width="120">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="任务组"
                        prop="taskGroup"
                        width="70">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="任务说明"
                        prop="note">
                </el-table-column>

                <el-table-column
                        :render-header="tableAction"
                        align="center"
                        label="执行类"
                        prop="taskClass">

                    <template slot-scope="scope">
                        <el-tooltip effect="light" placement="bottom">
                            <div slot="content">{{scope.row.taskClass}}</div>
                            <span>{{"..." + scope.row.taskClass.substring(scope.row.taskClass.lastIndexOf(".") + 1)}}</span>
                        </el-tooltip>
                    </template>

                </el-table-column>

                <el-table-column
                        align="center"
                        label="执行参数"
                        prop="execParams">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="定时规则"
                        prop="cron">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="上次执行时间"
                        prop="prevFireTime"
                        sortable
                        width="160">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="下次执行时间"
                        prop="nextFireTime"
                        sortable
                        width="160">
                </el-table-column>

                <el-table-column align="center" label="最近一次执行结果" prop="execResult" width="150">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.execResult === -1">等待</el-tag>
                        <el-tag v-if="scope.row.execResult === 1" type="success">正常执行</el-tag>
                        <el-tag v-if="scope.row.execResult === 0" type="danger">错误</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                        align="center"
                        label="时区"
                        prop="timeZoneId">
                </el-table-column>

                <el-table-column
                        align="center"
                        label="状态"
                        prop="triggerState"
                        width="70">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.triggerState==='WAITING'">等待</el-tag>

                        <el-tag v-else-if="scope.row.triggerState==='PAUSED'" type="warning">暂停</el-tag>

                        <el-tag v-else-if="scope.row.triggerState==='ACQUIRED'" type="success">运行</el-tag>

                        <el-tag v-else-if="scope.row.triggerState==='BLOCKED'" type="warning">阻塞</el-tag>

                        <el-tag v-else-if="scope.row.triggerState==='ERROR'" type="danger">错误</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" fixed="right" label="操作" width="460">
                    <template scope="scope">
                        <el-button
                                plain
                                @click="handlePauseOrResumeOrDeleteOrExecute(scope.$index, scope.row, 4)"
                                size="small"
                                type="success">立即执行
                        </el-button>

                        <el-button
                                plain
                                @click="handlePauseOrResumeOrDeleteOrExecute(scope.$index, scope.row, 1)"
                                size="small"
                                type="warning">暂停
                        </el-button>

                        <el-button
                                plain
                                @click="handlePauseOrResumeOrDeleteOrExecute(scope.$index, scope.row, 2)"
                                size="small"
                                type="info">恢复
                        </el-button>

                        <el-button
                                plain
                                @click="handlePauseOrResumeOrDeleteOrExecute(scope.$index, scope.row, 3)"
                                size="small"
                                type="danger">删除
                        </el-button>

                        <el-button
                                plain
                                @click="showUpdateTaskFrom(scope.$index, scope.row)"
                                size="small"
                                type="success">修改
                        </el-button>

                        <el-button
                                plain
                                @click="showTaskLogForm(scope.$index, scope.row)"
                                size="small"
                                type="success">日志
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div align="center" style="margin-top: 10px">
                <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        :total="totalCount"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </div>
    </template>

    <template>
        <!--添加弹框-->
        <el-dialog :visible.sync="addTaskFormVisible" title="添加任务">
            <el-form :model="addTaskFormData" style="width:80%">
                <el-form-item label="任务名" label-width="120px">
                    <el-input auto-complete="off" clearable placeholder="最好用英文"
                              v-model="addTaskFormData.taskName"></el-input>
                </el-form-item>

                <el-form-item label="任务组" label-width="120px">
                    <el-input auto-complete="off" placeholder="可用中文，推荐按业务类型分组"
                              v-model="addTaskFormData.taskGroup"></el-input>
                </el-form-item>

                <el-form-item label="任务说明" label-width="120px">
                    <el-input auto-complete="off" autosize maxlength="50" placeholder="50字以内" show-word-limit
                              type="textarea" v-model="addTaskFormData.note"></el-input>
                </el-form-item>

                <el-form-item label="执行类" label-width="120px">
                    <el-input auto-complete="off" placeholder="执行任务全类名" v-model="addTaskFormData.taskClass"></el-input>
                </el-form-item>

                <el-form-item label="执行参数" label-width="120px">
                    <el-input auto-complete="off" autosize placeholder="格式：aaa=hello;bbb=world,多个参数用;隔开" type="textarea"
                              v-model="addTaskFormData.execParams"></el-input>
                </el-form-item>

                <el-form-item label="定时规则" label-width="120px">
                    <el-input auto-complete="off" v-model="addTaskFormData.cron"></el-input>
                </el-form-item>

                <el-form-item label="允许并发？" label-width="120px">
                    <el-radio-group v-model="addTaskFormData.concurrent">
                        <el-radio :label="1">允许</el-radio>
                        <el-radio :label="0">不允许</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="addTaskFormVisible = false">取 消</el-button>
                <el-button @click="addTaskSubmit" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </template>

    <template>
        <!--修改弹框-->
        <el-dialog :visible.sync="updateTaskFormVisible" title="修改任务">

            <el-form :model="updateTaskFormData" style="width:80%">
                <el-form-item label="任务名" label-width="120px">
                    <el-input auto-complete="off" disabled v-model="updateTaskFormData.taskName"></el-input>
                </el-form-item>

                <el-form-item label="任务组" label-width="120px">
                    <el-input auto-complete="off" disabled v-model="updateTaskFormData.taskGroup"></el-input>
                </el-form-item>

                <el-form-item label="任务说明" label-width="120px">
                    <el-input auto-complete="off" autosize maxlength="50" placeholder="50字以内" show-word-limit
                              type="textarea" v-model="updateTaskFormData.note"></el-input>
                </el-form-item>

                <el-form-item label="执行类" label-width="120px">
                    <el-input auto-complete="off" placeholder="执行任务全类名"
                              v-model="updateTaskFormData.taskClass"></el-input>
                </el-form-item>

                <el-form-item label="执行参数" label-width="120px">
                    <el-input auto-complete="off" autosize placeholder="格式：aaa=hello;bbb=world,多个参数用;隔开" type="textarea"
                              v-model="updateTaskFormData.execParams"></el-input>
                </el-form-item>

                <el-form-item label="定时规则" label-width="120px">
                    <el-input auto-complete="off" v-model="updateTaskFormData.cron"></el-input>
                </el-form-item>

                <el-form-item label="允许并发？" label-width="120px">
                    <el-radio-group v-model="updateTaskFormData.concurrent">
                        <el-radio :label="true">允许</el-radio>
                        <el-radio :label="false">不允许</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div class="dialog-footer" slot="footer">
                <el-button @click="updateTaskFormVisible = false">取 消</el-button>
                <el-button @click="updateTaskSubmit" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </template>

    <template>
        <!--暂停 恢复 删除 立即执行 提示弹框-->
        <el-dialog :visible.sync="pauseOrResumeOrDeleteOrExecuteFormVisible" title="操作确认">
            <span>您确定要进行此操作吗？</span>
            <span class="dialog-footer" slot="footer">
                <el-button @click="pauseOrResumeOrDeleteOrExecuteFormVisible = false">取 消</el-button>
                <el-button @click="commitPauseOrResumeOrDeleteOrExecuteForm" type="primary">确 定</el-button>
            </span>
        </el-dialog>
    </template>

</div>

<footer align="center">
    <p style="font-size: 14px; color: #b6b6b7">

        <span>Powered by leiguoqing Quartz-Lite: 1.3.1 Copyright&copy;2020-2023</span>

        <a style="color: #3482f6" href="https://gitee.com/leiguoqing/quartz-lite-starter">Gitee</a> |
        <a style="color: #3482f6" href="https://github.com/MRLEILOVE/quartz-lite-starter">GitHub</a>
    </p>
</footer>

<script>
    Vue.http.headers.common['language'] = 'en';
    var vue = new Vue({
        el: "#task",
        data: {
            //表格当前页数据
            sysTaskList: [],

            //请求的URL
            url: 'tasks',

            //默认每页数据量
            pageSize: 10,

            //当前页码
            currentPage: 1,

            //查询的页码
            start: 1,

            //默认数据总数
            totalCount: 1000,

            //添加对话框默认可见性
            addTaskFormVisible: false,

            //修改对话框默认可见性
            updateTaskFormVisible: false,

            //暂停 恢复 删除 立即执行 弹框默认可见性
            pauseOrResumeOrDeleteOrExecuteFormVisible: false,

            //提交的表单
            addTaskFormData: {
                taskName: '',
                taskGroup: '',
                taskClass: '',
                note: '',
                cron: '',
                execParams: '',
                concurrent: 0,
            },
            //修改表单
            updateTaskFormData: {
                taskName: '',
                taskGroup: '',
                note: '',
                cron: '',
                taskClass: '',
                execParams: '',
                concurrent: '',
            },
            //暂停|恢复|删除表单
            form: {
                index: '',
                row: '',
                type: '',
            },
            cycleTime: [
                {
                    //数组格式
                    label: '关闭',
                    value: 0
                },
                {
                    //数组格式
                    label: '1秒钟',
                    value: 1
                },
                {
                    //数组格式
                    label: '5秒钟',
                    value: 5
                },
                {
                    //数组格式
                    label: '10秒钟',
                    value: 10
                },
                {
                    //数组格式
                    label: '15秒钟',
                    value: 15
                }
            ],
            value: 1,
            timer: '',
            currentDate: new Date(),
            embedded: false,
        },
        mounted() {
            this.timer = setInterval(function () {
                vue.initData(vue.currentPage, vue.pageSize);
            }, this.value * 1000);

            setInterval(function () {
                vue.currentDate = new Date(); // 修改数据date
            }, 1000)

            // 获取是否嵌入系统
            this.getEmbedded();
        },
        methods: {
            // 提醒通知
            notifyWarning(msg) {
                this.$notify({
                    title: '警告',
                    message: msg,
                    type: 'warning'
                });
            },

            // 成功通知
            notifySuccess(msg) {
                this.$notify({
                    title: '成功',
                    message: msg,
                    type: 'success'
                });
            },

            // 失败通知
            notifyError(msg) {
                this.$notify.error({
                    title: '错误',
                    message: msg,
                });
            },

            // 自动刷新页面
            autoRefreshTime(cycleTime) {
                clearInterval(this.timer);
                if (cycleTime === 0) {
                    clearInterval(this.timer);
                } else {
                    var time = cycleTime * 1000;
                    this.timer = setInterval(function () {
                        vue.initData(vue.currentPage, vue.pageSize);
                    }, time);
                }
            },

            //从服务器读取数据
            initData(pageNum, pageSize) {
                this.$http.get('tasks/' + pageNum + '/' + pageSize).then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    var data = body.data;
                    switch (meta.code) {
                        case 0:
                            this.sysTaskList = data.records;
                            this.totalCount = data.total;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            //单行删除
            handleDelete: function (index, row) {
                this.$http.delete('tasks/' + row.taskName + '/' + row.taskGroup).then(function (res) {
                    var meta = res.body.meta;
                    switch (meta.code) {
                        case 0:
                            this.notifySuccess(meta.msg);
                            this.initData(this.currentPage, this.pageSize);
                            this.pauseOrResumeOrDeleteOrExecuteFormVisible = false;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            //暂停任务
            handlePause: function (index, row) {
                this.$http.post('tasks/action/pause/' + row.taskName + '/' + row.taskGroup).then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    switch (meta.code) {
                        case 0:
                            this.notifySuccess(meta.msg);
                            this.initData(this.currentPage, this.pageSize);
                            this.pauseOrResumeOrDeleteOrExecuteFormVisible = false;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            //恢复任务
            handleResume: function (index, row) {
                this.$http.post('tasks/action/resume/' + row.taskName + '/' + row.taskGroup).then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    switch (meta.code) {
                        case 0:
                            this.notifySuccess(meta.msg);
                            this.initData(this.currentPage, this.pageSize);
                            this.pauseOrResumeOrDeleteOrExecuteFormVisible = false;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            // 执行任务
            handleExecute: function (index, row) {
                this.$http.post('tasks/action/execute/' + row.taskName + "/" + row.taskGroup).then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    switch (meta.code) {
                        case 0:
                            this.notifySuccess(meta.msg);
                            this.initData(this.currentPage, this.pageSize);
                            this.pauseOrResumeOrDeleteOrExecuteFormVisible = false;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function (res) {
                    this.notifyError(res.body.meta.msg);
                });
            },

            // 弹出暂停|恢复|删除|立即执行对话框
            handlePauseOrResumeOrDeleteOrExecute: function (index, row, type) {
                this.form.index = index;
                this.form.row = row;
                this.form.type = type;
                this.pauseOrResumeOrDeleteOrExecuteFormVisible = true;
            },

            //处理暂停|恢复|删除|立即执行表单提交
            commitPauseOrResumeOrDeleteOrExecuteForm: function () {
                var type = this.form.type;
                switch (type) {
                    case 1:
                        this.handlePause(this.form.index, this.form.row);
                        break;
                    case 2:
                        this.handleResume(this.form.index, this.form.row);
                        break;
                    case 3:
                        this.handleDelete(this.form.index, this.form.row);
                        break;
                    case 4:
                        this.handleExecute(this.form.index, this.form.row);
                        break;
                }
            },


            //刷新
            refresh: function () {
                this.initData(this.currentPage, this.pageSize);
            },

            //弹出添加对话框
            showAddTaskForm: function () {
                this.addTaskFormVisible = true;
            },

            //打开新页面
            windowOpen: function (url) {
                window.open(url, "_blank");
            },

            //添加
            addTaskSubmit: function () {
                this.$http.post('tasks', {
                    "taskName": this.addTaskFormData.taskName,
                    "taskGroup": this.addTaskFormData.taskGroup,
                    "taskClass": this.addTaskFormData.taskClass,
                    "note": this.addTaskFormData.note,
                    "cron": this.addTaskFormData.cron,
                    "execParams": this.addTaskFormData.execParams,
                    "concurrent": this.addTaskFormData.concurrent,
                }, {emulateJSON: true}).then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    switch (meta.code) {
                        case 0:
                            this.notifySuccess(meta.msg);
                            this.initData(this.currentPage, this.pageSize);
                            this.addTaskFormVisible = false;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function (res) {
                    this.notifyError(res.body.meta.msg);
                });
            },

            //弹出更新对话框
            showUpdateTaskFrom: function (index, row) {
                this.updateTaskFormVisible = true;
                this.updateTaskFormData.taskName = row.taskName;
                this.updateTaskFormData.taskGroup = row.taskGroup;
                this.updateTaskFormData.note = row.note;
                this.updateTaskFormData.taskClass = row.taskClass;
                this.updateTaskFormData.execParams = row.execParams;
                this.updateTaskFormData.cron = row.cron;
                this.updateTaskFormData.concurrent = row.concurrent;
            },

            // 弹出查看日志表格
            showTaskLogForm: function (index, row) {
                this.windowOpen('task-log.html?taskId=' + row.taskId);
            },

            //更新任务
            updateTaskSubmit: function () {
                this.$http.put('tasks',
                    {
                        "taskName": this.updateTaskFormData.taskName,
                        "taskGroup": this.updateTaskFormData.taskGroup,
                        "note": this.updateTaskFormData.note,
                        "taskClass": this.updateTaskFormData.taskClass,
                        "execParams": this.updateTaskFormData.execParams,
                        "cron": this.updateTaskFormData.cron,
                        "concurrent": this.updateTaskFormData.concurrent,
                    }, {emulateJSON: true}
                ).then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    switch (meta.code) {
                        case 0:
                            this.notifySuccess(meta.msg);
                            this.initData(this.currentPage, this.pageSize);
                            this.updateTaskFormVisible = false;
                            break;
                        case 1000:
                            // 跳转至登录页面
                            window.location.href = "login.html";
                            break;
                        default:
                            this.notifyWarning(meta.msg);
                            break;
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            // 登出
            logout() {
                this.$http.post('user/logout').then(function (res) {
                    var body = res.body;
                    var meta = body.meta;
                    if (meta.code === 0) {
                        this.notifySuccess(meta.msg);
                        // 跳转至登录页面
                        window.location.href = "login.html";
                    } else {
                        this.notifyWarning(meta.msg);
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },

            //每页显示数据量变更
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.initData(this.currentPage, this.pageSize);
            },

            //页码变更
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.initData(this.currentPage, this.pageSize);
            },

            // 获取是否嵌入系统
            getEmbedded() {
                this.$http.get('user/embedded').then(function (res) {
                    var body = res.body;
                    const meta = body.meta;
                    if (meta.code === 0) {
                        this.embedded = body.data;
                    } else {
                        this.notifyWarning(meta.msg);
                    }
                }, function () {
                    this.notifyError(res.body.meta.msg);
                });
            },
        },
    });

    //载入数据
    vue.initData(vue.currentPage, vue.pageSize);
</script>
</body>
</html>
